<template>
  <div class="route-analysis-container">
    <!-- 地图容器 -->
    <div ref="routeAnalysisMapView" class="route-analysis-map-view"></div>

    <!-- 图层控制面板 -->
    <div class="layer-control-panel">
      <el-card class="layer-card">
        <div class="card-title">智能路线规划</div>
        <el-collapse v-model="activeCollapse">
          <el-collapse-item title="图层显示控制" name="layers">
            <el-space direction="vertical" alignment="stretch" size="small">
              <el-checkbox v-model="layerVisibility.building"
                @change="toggleLayerVisibility('building')">
                <el-icon><House /></el-icon> 建筑物
              </el-checkbox>
              <el-checkbox v-model="layerVisibility.facilities"
                @change="toggleLayerVisibility('facilities')">
                <el-icon><Service /></el-icon> 设施
              </el-checkbox>
              <el-checkbox v-model="layerVisibility.roads" @change="toggleLayerVisibility('roads')">
                <el-icon><Guide /></el-icon> 道路
              </el-checkbox>
            </el-space>
          </el-collapse-item>

        </el-collapse>
      </el-card>
    </div>

    <!-- 操作说明悬浮按钮 -->
    <div class="instruction-button" @click="showInstructionPanel = true">
      <el-icon>
        <InfoFilled />
      </el-icon>
      <span>智能导航指南</span>
    </div>

    <!-- 操作说明面板 -->
    <el-drawer
      v-model="showInstructionPanel"
      direction="rtl"
      size="360px"
      :with-header="false"
      class="custom-drawer"
    >
      <div class="instruction-panel">
        <div class="drawer-header">
          <h2>智能路线规划指南</h2>
          <div class="version-tag">Pro版</div>
        </div>
        <div class="instruction-content">
          <h3>快速开始</h3>
          <ol>
            <li>点击地图选择您的当前位置</li>
            <li>点击建筑物或设施选择目的地</li>
            <li>点击"导航到这里"按钮获取智能路线</li>
          </ol>
          <h3>图标指南</h3>
          <div class="icon-description">
            <div class="icon-item">
              <div class="icon-circle start"></div>
              <span>您的位置</span>
            </div>
            <div class="icon-item">
              <div class="icon-circle destination"></div>
              <span>目的地位置</span>
            </div>
          </div>
          <h3>高级功能</h3>
          <ul class="feature-list">
            <li><el-icon><Star /></el-icon> 实时路况更新</li>
            <li><el-icon><Star /></el-icon> 智能路线推荐</li>
            <li><el-icon><Star /></el-icon> 图层显示控制</li>
          </ul>
        </div>
      </div>
    </el-drawer>

    <!-- 目标设施/建筑物信息区域 -->
    <el-drawer
      v-model="showTargetInfo"
      direction="rtl"
      size="360px"
      :with-header="false"
      class="custom-drawer"
    >
      <div v-if="currentTarget && uiUpdateTrigger >= 0" class="target-detail">
        <div class="target-header">
          <div class="target-title">
            <h2>{{ getTargetName() }}</h2>
            <el-tag size="small" :type="currentTargetType === 'building' ? 'success' : 'warning'">
              {{ currentTargetType === 'building' ? '建筑' : '设施' }}
            </el-tag>
          </div>
          <el-button
            type="primary"
            size="small"
            @click="calculateRoute()"
            class="navigate-btn"
          >
            <el-icon>
              <Location />
            </el-icon>
            导航到这里
          </el-button>
        </div>

        <div class="target-image-container">
          <div class="target-image" :class="currentTargetType === 'building' ? 'building-img' : 'facility-img'"></div>
        </div>

        <el-descriptions :column="1" border class="target-info">
          <el-descriptions-item label="名称">{{ getTargetName() }}</el-descriptions-item>
          <el-descriptions-item v-if="currentTargetType === 'building'" label="建筑类型">
            <el-icon><House /></el-icon>
            {{ currentTarget.attributes.Buildingtype || '未知' }}
          </el-descriptions-item>
          <el-descriptions-item v-if="currentTargetType === 'facility'" label="设施类型">
            <el-icon><Service /></el-icon>
            {{ currentTarget.attributes.FacilitiesType || '未知' }}
          </el-descriptions-item>
          <el-descriptions-item label="描述">
            {{ currentTarget.attributes.description || '无描述' }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="quick-actions">
          <el-button size="small" type="info" plain>
            <el-icon><Star /></el-icon> 收藏
          </el-button>
          <el-button size="small" type="info" plain>
            <el-icon><Share /></el-icon> 分享
          </el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 路线详情卡片 -->
    <div class="route-card" v-if="showRouteDetails">
      <div class="route-header">
        <div class="route-title">
          <el-icon><MapLocation /></el-icon>
          <h3>智能导航路线</h3>
        </div>
        <el-button
          class="close-btn"
          type="info"
          circle
          size="small"
          @click="showRouteDetails = false"
        >
          <el-icon>
            <Close />
          </el-icon>
        </el-button>
      </div>

      <div class="route-summary">
        <div class="summary-item">
          <el-icon>
            <Position />
          </el-icon>
          <span>{{ (routeDistance / 1000).toFixed(2) }}km</span>
        </div>
        <div class="summary-item">
          <el-icon>
            <Timer />
          </el-icon>
          <span>约{{ Math.ceil(routeTime / 60) }}分钟</span>
        </div>

      </div>

      <el-collapse accordion>
        <el-collapse-item title="导航指引">
          <div class="step-info">
            <div class="step-title">{{ startLocationName }} → {{ destinationName }}</div>
            <div class="step-detail">
              <span>{{ (routeDistance / 1000).toFixed(2) }}km</span>
              <span>·</span>
              <span>{{ Math.ceil(routeTime / 60) }}分钟</span>
            </div>
          </div>
          <div class="instructions-list">
            <div
              v-for="(instruction, index) in routeInstructions"
              :key="index"
              class="instruction-item"
            >
              <span class="instruction-index">{{ index + 1 }}</span>
              <span class="instruction-text">{{ instruction }}</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>

      <div class="card-actions">
        <el-button-group>
          <el-button type="primary" size="small">
            <el-icon><Promotion /></el-icon> 分享
          </el-button>
          <el-button type="success" size="small">
            <el-icon><Download /></el-icon> 保存
          </el-button>
          <el-button type="danger" size="small" @click="clearRoute">
            <el-icon><Delete /></el-icon> 清空
          </el-button>
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { InfoFilled, Location, Position, Timer, Close, House, Service, Guide, Star, Share, MapLocation, Promotion, Download, Delete } from '@element-plus/icons-vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Graphic from '@arcgis/core/Graphic'
import Polyline from '@arcgis/core/geometry/Polyline'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
import SimpleLineSymbol from '@arcgis/core/symbols/SimpleLineSymbol'
import gaodeLayer from '@/utils/GaoDeBaseLayer'
import { ElMessage,ElNotification } from 'element-plus'
import { getGaoDeRoute } from '@/utils/gaodeAPI'

// 地图和视图
let map: __esri.Map
let view: __esri.MapView
const routeAnalysisMapView = ref<HTMLDivElement>()

// 图层
let buildingLayer: __esri.FeatureLayer | null = null
let facilitiesLayer: __esri.FeatureLayer | null = null
let roadsLayer: __esri.FeatureLayer | null = null

// 图层URL
const buildingLayerUrl =
  'https://services8.arcgis.com/CmXfu09loK81if9H/arcgis/rest/services/GISRouteAnalysis/FeatureServer/0'
const facilitiesLayerUrl =
  'https://services8.arcgis.com/CmXfu09loK81if9H/arcgis/rest/services/GISRouteAnalysis/FeatureServer/1'
const roadsLayerUrl =
  'https://services8.arcgis.com/CmXfu09loK81if9H/arcgis/rest/services/GISRouteAnalysis/FeatureServer/2'

// 图层可见性控制
const layerVisibility = ref({
  building: true,
  facilities: true,
  roads: true,
})

// 控制折叠面板的展开状态
const activeCollapse = ref(['layers'])

// 用户选择的位置
let userLocation: __esri.Point | null = null
let userLocationGraphic: __esri.Graphic | null = null

// 面板控制
const showInstructionPanel = ref(false)
const showTargetInfo = ref(false)

// 目标对象（建筑物或设施）
let currentTarget: any = null
let currentTargetType: 'building' | 'facility' | null = null
let targetGraphic: __esri.Graphic | null = null

// 添加用于触发UI更新的状态变量
const uiUpdateTrigger = ref(0)

// 路线规划
const showRouteDetails = ref(false)
const routeGraphics: __esri.Graphic[] = []
const routeDistance = ref(0)
const routeTime = ref(0)
const routeInstructions = ref<string[]>([])
const startLocationName = ref('您的位置')
const destinationName = ref('目的地')

// 导航状态
const isNavigating = ref(false)
const currentNavigationStep = ref('')
const nextNavigationStep = ref('')
const navigationProgress = ref(0)
const currentStepIndex = ref(0)

// 地图初始化
onMounted(async () => {
  await initMap()
  await loadLayers()
})

// 初始化地图
async function initMap() {
  map = new Map({
    basemap: {
      baseLayers: [gaodeLayer],
    },
  })

  view = new MapView({
    container: routeAnalysisMapView.value!,
    map: map,
    center: [116.79344073176162, 36.53820494873281], // 默认中心点
    zoom: 16,
  })

  // 点击地图事件
  view.on('click', async (event) => {
    const hitResults = (await view?.hitTest(event))?.results as __esri.MapViewGraphicHit[]

    // 检查是否点击了建筑物或设施
    const buildingFeature = hitResults.find(
      (result) => result.layer?.id === buildingLayer?.id,
    )?.graphic

    const facilityFeature = hitResults.find(
      (result) => result.layer?.id === facilitiesLayer?.id,
    )?.graphic

    if (buildingFeature) {
      // 点击了建筑物
      showTargetDetails(buildingFeature, 'building')
    } else if (facilityFeature) {
      // 点击了设施
      showTargetDetails(facilityFeature, 'facility')
    } else {
      // 点击了地图其他位置，设置为用户位置
      setUserLocation(event.mapPoint)
    }
  })
}

// 加载图层
async function loadLayers() {
  try {
    // 创建建筑物图层 - 使用填充样式
  buildingLayer = new FeatureLayer({
    url: buildingLayerUrl,
    outFields: ['*'],
    visible: layerVisibility.value.building,
    popupEnabled: false,
    renderer: {
      type: 'simple',
      symbol: {
        type: 'simple-marker',
        color: [255, 165, 0, 0.6], // 橙色半透明
        outline: {
          color: [255, 140, 0, 1], // 深橙色边框
          width: 2
        }
      }
    } as any,
    popupTemplate: {
      title: '建筑物信息',
      content: [
        {
          type: 'fields',
          fieldInfos: [
            { fieldName: 'name', label: '建筑名称' },
            { fieldName: 'BuildingType', label: '建筑类型' },
            { fieldName: 'OBJECTID', label: 'ID' }
          ]
        }
      ]
    }
  })

  // 创建设施图层 - 使用点样式
  facilitiesLayer = new FeatureLayer({
    url: facilitiesLayerUrl,
    outFields: ['*'],
    visible: layerVisibility.value.facilities,
    popupEnabled: false,
    renderer: {
      type: 'simple',
      symbol: {
        type: 'simple-marker',
        color: [0, 150, 255, 0.8], // 蓝色
        size: 12,
        outline: {
          color: [0, 100, 200, 1], // 深蓝色边框
          width: 2
        },
        style: 'circle'
      }
    } as any,
    popupTemplate: {
      title: '设施信息',
      content: [
        {
          type: 'fields',
          fieldInfos: [
            { fieldName: 'name', label: '设施名称' },
            { fieldName: 'FacilityType', label: '设施类型' },
            { fieldName: 'OBJECTID', label: 'ID' }
          ]
        }
      ]
    }
  })

  // 创建道路图层 - 使用线样式，根据道路类型设置不同颜色
  roadsLayer = new FeatureLayer({
    url: roadsLayerUrl,
    outFields: ['*'],
    visible: layerVisibility.value.roads,
    popupEnabled: false,
    renderer: {
      type: 'unique-value',
      field: 'RoadType',
      defaultSymbol: {
        type: 'simple-line',
        color: [128, 128, 128, 0.8], // 灰色默认
        width: 3
      },
      uniqueValueInfos: [
        {
          value: '主干道',
          symbol: {
            type: 'simple-line',
            color: [255, 0, 0, 0.9], // 红色
            width: 6
          }
        },
        {
          value: '次干道',
          symbol: {
            type: 'simple-line',
            color: [255, 165, 0, 0.8], // 橙色
            width: 4
          }
        },
        {
          value: '支路',
          symbol: {
            type: 'simple-line',
            color: [255, 255, 0, 0.8], // 黄色
            width: 3
          }
        },
        {
          value: '步行道',
          symbol: {
            type: 'simple-line',
            color: [0, 255, 0, 0.8], // 绿色
            width: 2,
            style: 'dash'
          }
        },
        {
          value: '自行车道',
          symbol: {
            type: 'simple-line',
            color: [0, 191, 255, 0.8], // 天蓝色
            width: 2,
            style: 'dot'
          }
        }
      ]
    } as any,
    popupTemplate: {
      title: '道路信息',
      content: [
        {
          type: 'fields',
          fieldInfos: [
            { fieldName: 'name', label: '道路名称' },
            { fieldName: 'RoadType', label: '道路类型' },
            { fieldName: 'OBJECTID', label: 'ID' }
          ]
        }
      ]
    }
  })

    map.addMany([buildingLayer, facilitiesLayer, roadsLayer])
    ElMessage.success('图层加载成功')
  } catch (error) {
    console.error('加载图层失败', error)
    ElMessage.error('加载图层失败')
  }
}

// 切换图层可见性
function toggleLayerVisibility(layerType: string) {
  switch (layerType) {
    case 'building':
      if (buildingLayer) {
        buildingLayer.visible = Boolean(layerVisibility.value.building)
      }
      break
    case 'facilities':
      if (facilitiesLayer) {
        facilitiesLayer.visible = Boolean(layerVisibility.value.facilities)
      }
      break
    case 'roads':
      if (roadsLayer) {
        roadsLayer.visible = Boolean(layerVisibility.value.roads)
      }
      break
  }
}

// 设置用户位置
function setUserLocation(point: __esri.Point) {
  // 清除之前的用户位置标记
  if (userLocationGraphic) {
    view.graphics.remove(userLocationGraphic)
  }

  // 保存用户位置
  userLocation = point

  // 创建用户位置标记
  const symbol = new SimpleMarkerSymbol({
    color: [255, 0, 0],
    size: 12,
    outline: {
      color: [255, 255, 255],
      width: 2,
    },
  })

  userLocationGraphic = new Graphic({
    geometry: point,
    symbol: symbol,
  })

  view.graphics.add(userLocationGraphic)
  ElMessage.success('已设置起点位置')
}

// 显示目标详情
function showTargetDetails(target: any, type: 'building' | 'facility') {
  currentTarget = target
  currentTargetType = type
  showTargetInfo.value = true
  uiUpdateTrigger.value = Date.now() // 使用时间戳确保强制更新

  // 如果已经有目标标记，先移除
  if (targetGraphic) {
    view.graphics.remove(targetGraphic)
  }

  // 创建目标标记
  const symbol = new SimpleMarkerSymbol({
    color: [0, 122, 194],
    size: 12,
    outline: {
      color: [255, 255, 255],
      width: 2,
    },
  })

  targetGraphic = new Graphic({
    geometry: target.geometry,
    symbol: symbol,
  })

  view.graphics.add(targetGraphic)
}

// 获取目标名称
function getTargetName() {
  if (!currentTarget) return '未知目标'

  if (currentTargetType === 'building') {
    return currentTarget.attributes.name || '未命名建筑'
  } else if (currentTargetType === 'facility') {
    return currentTarget.attributes.name || '未命名设施'
  }

  return '未知目标'
}

// 计算路线
async function calculateRoute() {
  if (!userLocation) {
    ElMessage.warning('请先选择您的位置')
    return
  }

  if (!currentTarget) {
    ElMessage.warning('请先选择目标位置')
    return
  }

  try {
    // 清除之前的路线
    clearRoute()

    // 保存目的地名称
    destinationName.value = getTargetName()

    // 显示路线计算中的通知
    ElNotification({
      title: '路线计算中',
      message: '正在计算路线，请稍候...',
      type: 'info',
      duration: 2000
    })

    // 调用高德路径规划API
    const routeResult = await getGaoDeRoute(
      `${userLocation.longitude},${userLocation.latitude}`,
      `${currentTarget.geometry.longitude},${currentTarget.geometry.latitude}`,
    )

    // 绘制路线
    if (routeResult && routeResult.route && routeResult.route.paths[0]) {
      const path = routeResult.route.paths[0]

      // 将路径点转换为二维数组
      const pathPoints = path.steps.flatMap((step) => {
        return step.polyline.split(';').map((point) => {
          const [lng, lat] = point.split(',').map(Number)
          return [lng, lat]
        })
      })

      // 创建路线图形
      const routeLine = new Graphic({
        geometry: new Polyline({
          paths: [pathPoints],
        }),
        symbol: new SimpleLineSymbol({
          color: [0, 122, 194, 0.8],
          width: 4,
        }),
      })

      view.graphics.add(routeLine)
      routeGraphics.push(routeLine)

      // 提取路线指引信息
      routeInstructions.value = path.steps.map((step) => step.instruction)

      // 设置路线距离和时间
      routeDistance.value = Number(path.distance)
      routeTime.value = Number(path.duration)

      // 显示路线详情
      showRouteDetails.value = true
      ElMessage.success('路线规划成功')
    } else {
      ElMessage.error('无法获取路线信息')
    }
  } catch (error) {
    console.error('路线规划失败', error)
    ElMessage.error('路线规划失败')
  }
}

// 清除地图上的图形
function clearGraphics() {
  // 保留用户位置标记和目标标记
  const graphicsToKeep = []
  if (userLocationGraphic) graphicsToKeep.push(userLocationGraphic)
  if (targetGraphic) graphicsToKeep.push(targetGraphic)

  view.graphics.removeAll()

  // 重新添加保留的图形
  graphicsToKeep.forEach(graphic => view.graphics.add(graphic))

  routeGraphics.length = 0
}



// 清空路线
function clearRoute() {
  clearGraphics()

  // 重置路线信息
  routeInstructions.value = []
  routeDistance.value = 0
  routeTime.value = 0
  showRouteDetails.value = false
  isNavigating.value = false
}

</script>

<style scoped>
.route-analysis-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.route-analysis-map-view {
  width: 100%;
  height: 100%;
}

/* 图层控制面板 */
.layer-control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 280px;
}

.layer-card {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-title {
  background: linear-gradient(135deg, #42b983, #2f9c6a);
  color: white;
  padding: 12px 16px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  margin-bottom: 10px;
}

/* 操作说明按钮 */
.instruction-button {
  position: absolute;
  top: 20px;
  left: 20px;
  background: linear-gradient(135deg, #42b983, #2f9c6a);
  color: white;
  padding: 10px 16px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}

.instruction-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.instruction-button .el-icon {
  margin-right: 8px;
  font-size: 18px;
  color: white;
}

/* 操作说明面板 */
.instruction-panel {
  padding: 20px;
  background-color: #f9f9f9;
  height: 100%;
}

.drawer-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #42b983;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.version-tag {
  background-color: #42b983;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.instruction-content h3 {
  margin-top: 24px;
  margin-bottom: 16px;
  color: #42b983;
  font-weight: 600;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-list .el-icon {
  color: #42b983;
}

.icon-description {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.icon-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #ddd;
}

.icon-circle.start {
  background-color: #ff0000;
}

.icon-circle.destination {
  background-color: #007ac2;
}

/* 目标信息 */
.target-detail {
  padding: 20px;
  background-color: #f9f9f9;
  height: 100%;
}

.target-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #42b983;
}

.target-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.target-title h2 {
  margin: 0;
  color: #333;
}

.navigate-btn {
  background: linear-gradient(135deg, #42b983, #2f9c6a);
  border: none;
}

.target-image-container {
  margin: 16px 0;
  height: 150px;
  overflow: hidden;
  border-radius: 8px;
}

.target-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

.target-image:hover {
  transform: scale(1.05);
}

.building-img {
  background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://picsum.photos/id/1031/600/400');
}

.facility-img {
  background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://picsum.photos/id/1029/600/400');
}

.target-info {
  margin-bottom: 16px;
}

.quick-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.distance-info {
  margin-top: 20px;
}

.distance-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* 路线详情卡片 */
.route-card {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 350px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 10;
  overflow: hidden;
}

.route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: linear-gradient(135deg, #42b983, #2f9c6a);
  color: white;
}

.route-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.route-header h3 {
  margin: 0;
  font-size: 16px;
  color: white;
}

.route-header .close-btn {
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
}

.route-summary {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
  align-items: center;
}

.summary-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 8px;
}

.summary-item .el-icon {
  margin-right: 8px;
  color: #42b983;
  font-size: 18px;
}

.route-quality {
  margin-left: auto;
}

.step-info {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

.step-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.step-detail {
  font-size: 13px;
  color: #666;
}

.instructions-list {
  padding: 10px 15px;
}

.instruction-item {
  display: flex;
  margin-bottom: 10px;
  align-items: flex-start;
}

.instruction-index {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: #409eff;
  color: white;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.instruction-text {
  flex: 1;
  line-height: 1.5;
}

.card-actions {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  border-top: 1px solid #eee;
}

/* 导航提示 */
.navigation-hint {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 350px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  z-index: 10;
}

.hint-content {
  margin-bottom: 15px;
}

.current-instruction {
  font-weight: bold;
  margin-bottom: 10px;
}

.next-step {
  font-size: 13px;
  color: #666;
  display: flex;
  gap: 5px;
}
</style>
